<script setup>
import { hiprint, defaultElementTypeProvider } from 'vue-plugin-hiprint'

const emit = defineEmits()
// 数据
const printConfig = reactive({
  visible: false,
  spinning: true,
  waitShowPrinter: false,
  // 纸张宽 mm
  width: 0,
  height: 0,
  // 模板
  hiprintTemplate: {},
  // 数据
  printData: {}
})
const { proxy } = getCurrentInstance()
const loading = ref(false)
const dialogVisible = ref(false)
const isShow = (hiprintTemplate, printData) => {
  loading.value = true
  dialogVisible.value = true
  printConfig.width = hiprintTemplate.lastJson.panels[0].width
  printConfig.height = hiprintTemplate.lastJson.panels[0].height
  printConfig.hiprintTemplate = hiprintTemplate
  printConfig.printData = printData
  // eslint-disable-next-line no-undef

  setTimeout(async () => {
    $('#preview_content_design1').html(hiprintTemplate.getHtml(printData))
    loading.value = false
  }, 1000)
}

// 预览中的预览
const isShow1 = (template, printData) => {
  dialogVisible.value = true
  const hiprintTemplate = new hiprint.PrintTemplate({ template: template })
  loading.value = true
  printConfig.width = template.panels[0].width
  printConfig.height = template.panels[0].height
  printConfig.hiprintTemplate = hiprintTemplate
  printConfig.printData = printData
  setTimeout(() => {
    $('#preview_content_design1').html(hiprintTemplate.getHtml(printData))
    loading.value = false
  }, 1000)
  // eslint-disable-next-line no-undef
}
// 打印
const print = () => {
  dialogVisible.value = false
  // proxy.$modal.loading('打印中,请稍候...')
  // printConfig.hiprintTemplate.on('printSuccess', function (data) {
  //   setTimeout(() => {
  //     proxy.$modal.closeLoading()
  //     emit('printYes')
  //     proxy.successMsg('打印完成')
  //   }, 1000)
  // }) printConfig.printData
  printConfig.hiprintTemplate.print(printConfig.printData, {
    callback: () => {}
  })
}
const toPdf = () => {
  printConfig.hiprintTemplate.toPdf(printConfig.printData, '打印预览pdf')
}

defineExpose({ isShow, printConfig, isShow1 })
</script>

<template>
  <div>
    <p-dialog
      :isBtn="false"
      title="打印预览"
      v-model="dialogVisible"
      @close="dialogVisible = false"
      :width="printConfig.width + 5 + 'mm'"
    >
      <div :style="`height:${printConfig.height}mm`" class="bodys" v-loading="loading">
        <div :style="`height:${printConfig.height}mm`" id="preview_content_design1"></div>
      </div>
      <div v-if="!loading">
        <div class="Btn">
          <el-button type="success" @click="print">打印</el-button>
          <el-button type="warning" @click="toPdf">打印预览pdf</el-button>
        </div>
      </div>
    </p-dialog>
  </div>
</template>

<style>
.bodys {
  overflow: hidden;
}
</style>
